<!DOCTYPE html>
<html>
<head>
    <title>春芽社区故事</title>
    #parse("sys/header.html")
    <style>
        .upload-list {
            display: inline-block;
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            border: 1px solid transparent;
            border-radius: 4px;
            overflow: hidden;
            background: #fff;
            position: relative;
            box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
            margin-right: 4px;
        }

        .upload-list img {
            width: 100%;
            height: 100%;
        }

        .upload-list-cover {
            display: none;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, .6);
        }

        .upload-list:hover .upload-list-cover {
            display: block;
        }

        .upload-list-cover i {
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            margin: 0 2px;
        }
    </style>
</head>
<body>
<div id="rrapp" v-cloak>
    <div v-show="showList">
        <Row :gutter="16">
            <i-col span="4">
                <i-input v-model="q.name" @on-enter="query" placeholder="标题关键词"/>
            </i-col>
            <i-button @click="query">查询</i-button>
            <i-button type="warning" @click="openComment"><i class="fa fa-pencil-square-o"></i>&nbsp;查看评论</i-button>
            <div class="buttons-group">
                #if($shiro.hasPermission("posts:save"))
                <i-button type="info" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</i-button>
                #end
                #if($shiro.hasPermission("posts:update"))
                <i-button type="warning" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</i-button>
                #end
                #if($shiro.hasPermission("posts:delete"))
                <i-button type="error" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</i-button>
                #end
            </div>
        </Row>
        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>
    </div>

    <Card v-show="!showList">
        <p slot="title">{{title}}</p>
        <i-form ref="formValidate" :model="posts" :rules="ruleValidate" :label-width="80">
            <!--<Form-item label="用户id" prop="userId">-->
            <!--<i-input v-model="posts.userId" placeholder="用户id"/>-->
            <!--</Form-item>-->
            <!--<Form-item label="发帖ip" prop="ip">-->
            <!--<i-input v-model="posts.ip" placeholder="发帖ip"/>-->
            <!--</Form-item>-->
            <!--<Form-item label="城市" prop="city">-->
            <!--<i-input v-model="posts.city" placeholder="城市"/>-->
            <!--</Form-item>-->
            <!--<Form-item label="阅读数" prop="viewCount">-->
            <!--<i-input v-model="posts.viewCount" placeholder="阅读数"/>-->
            <!--</Form-item>-->
            <!--<Form-item label="点赞数量" prop="likeCount">-->
            <!--<i-input v-model="posts.likeCount" placeholder="点赞数量"/>-->
            <!--</Form-item>-->
            <Form-item label="标题" prop="title">
                <i-input v-model="posts.title" placeholder="标题"/>
            </Form-item>
            <Form-item label="内容" prop="contentDesc">
                <textarea v-model="posts.contentDesc" placeholder="内容" :rows="5" style="width:100%;"></textarea>
            </Form-item>
            <Form-item label="是否有图片" prop="isUpload">
                <Radio-group v-model="isUpload" @on-change="isUploadChange">
                    <Radio label="1">
                        <span>是</span></Radio>
                    <Radio label="0">
                        <span>否</span></Radio>
                </Radio-group>
            </Form-item>
            <Form-item label="上传图片" prop="uploadImg" v-if="isShow">
                <template>
                    <div class="upload-list" v-for="item in uploadList">
                        <template v-if="item.status === 'finished'">
                            <img :src="item.picUrl"/>
                            <div class="upload-list-cover">
                                <Icon type="ios-eye-outline" @click.native="handleView(item.picUrl)"></Icon>
                                <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                            </div>
                        </template>
                        <template v-else>
                            <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                        </template>
                    </div>
                    <Upload
                            ref="upload"
                            :show-upload-list="false"
                            :default-file-list="uploadList"
                            :on-success="handleSuccess"
                            :format="['jpg','jpeg','png']"
                            :max-size="2048"
                            :on-format-error="handleFormatError"
                            :on-exceeded-size="handleMaxSize"
                            :before-upload="handleBeforeUpload"
                            multiple
                            type="drag"
                            action="../sys/oss/upload"
                            style="display: inline-block;width:58px;">
                        <div style="width: 58px;height:58px;line-height: 58px;">
                            <Icon type="camera" size="20"></Icon>
                        </div>
                    </Upload>
                    <Modal title="查看图片" v-model="visible">
                        <img :src="imgName" v-if="visible" style="width: 100%"/>
                    </Modal>
                </template>
            </Form-item>
            <Form-item label="是否置顶" prop="isTop">
                <Radio-group v-model="posts.isTop">
                    <Radio label="0">
                        <span>申请</span></Radio>
                    <Radio label="1">
                        <span>置顶</span></Radio>
                    <Radio label="2">
                        <span>不置顶</span></Radio>
                </Radio-group>
            </Form-item>
            <Form-item label="是否推荐" prop="isRecommend">
                <Radio-group v-model="posts.isRecommend">
                    <Radio label="0">
                        <span>否</span></Radio>
                    <Radio label="1">
                        <span>是</span></Radio>
                </Radio-group>
            </Form-item>
            <Form-item label="是否热门" prop="isHot">
                <Radio-group v-model="posts.isHot">
                    <Radio label="0">
                        <span>否</span></Radio>
                    <Radio label="1">
                        <span>是</span></Radio>
                </Radio-group>
            </Form-item>
            <Form-item label="是否显示" prop="status">
                <Radio-group v-model="posts.status">
                    <Radio label="0">
                        <span>否</span></Radio>
                    <Radio label="1">
                        <span>是</span></Radio>
                </Radio-group>
            </Form-item>
            <Form-item>
                <i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
                <i-button type="warning" @click="reload" style="margin-left: 8px"/>
                返回</i-button>
                <!--<i-button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</i-button>-->
            </Form-item>
        </i-form>
    </Card>
</div>

<script src="${rc.contextPath}/js/shop/posts.js?_${date.systemTime}"></script>
</body>
</html>